<template>
  <el-menu
    router
    :default-active="CurrentPage.path"
    :collapse="isCollapse"
    :background-color="variables.ThemeBg"
    :text-color="variables.ThemeText"
    :active-text-color="variables.ThemeActiveText"
    onselectstart="return false;"
    style="-moz-user-select: none"
  >
    <div class="logo" v-show="!isCollapse">VUE3-Example</div>
    <div class="logo" v-show="isCollapse">VUE3-Ep</div>
    <template v-for="routeItem in routes" :key="routeItem">
      <component
        v-if="!routeItem.meta || !routeItem.meta.hidden"
        :is="
          routeItem.children && routeItem.children.length === 1
            ? 'menuItem'
            : 'subMenu'
        "
        :routes="
          routeItem.children && routeItem.children.length === 1
            ? routeItem.children[0]
            : routeItem
        "
        :basePath="routeItem.path"
      />
    </template>
  </el-menu>
</template>

<script>
// import { toRaw } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import menuItem from "./menuItem.vue";
import subMenu from "./subMenu.vue";
import variables from "@/styles/variables.scss";
export default {
  name: "LayoutAside",
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  components: {
    menuItem,
    subMenu
  },
  setup() {
    const $router = useRouter();
    // const routes = $router.options.routes;

    const $store = useStore();
    let { CurrentPage } = $store.state.Layout;
    let { routes } = $store.state.Permission;

    return {
      variables,
      routes,
      CurrentPage
    };
  }
};
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100vh;
  border-right: none;
}
.el-menu:not(.el-menu--collapse) {
  width: $AsideWidth;
}
.logo {
  font-size: 26px;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  line-height: 85px;
  height: 85px;
  text-shadow: 6px 6px 3px #cccccc61;
}
</style>
